<template>
    <el-container class="downwrap"> 
        <el-main >
            <div class="top"></div>
            <div class="main" > 
                <div style="width:120px; margin:auto"> 
                    <img src="../assets/icon-logo.png" alt="" >
                     <div class="title">
                        蓝罐教育
                    </div>
                </div>
                <div >  
                   
                    <div style="width:120px; margin:auto">
                        <img src="../assets/gzh.png" alt="" >  
                    </div> 
                    <div style="white-space: nowrap;">扫描即可打开该页面</div>
                </div>
                <div class="down-btn" @click="downFn">
                    <div>点击安装</div>
                </div>  
            </div>
        </el-main> 
    </el-container> 
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
      downFn(){
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if(isAndroid){
          alert("Android");
        }else if(isiOS){
          // alert("iOS") 
          var url = ' ';
          // window.open (url);
          //  window.location.href = url;
           var myFrame= document.createElement("iframe"); 
            myFrame.src = url; 
            myFrame.style.display = "non";
            document.body.appendChild(myFrame);
        }else{
          alert("pc") 

        }
        // if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        // //alert(navigator.userAgent);  
        // window.location.href ="iPhone.html";
        // } else if (/(Android)/i.test(navigator.userAgent)) {
        // //alert(navigator.userAgent); 
        // window.location.href ="Android.html";
        // } else {
        // window.location.href ="pc.html";
        // };

      }
  }
};
</script>
<style>
.downwrap.el-container {
  display: block;
}

.downwrap .top {
  background-image: url("../assets/top_bg_mobile_ratio.png");
  height: 8vh;
  width: 100%;
  background-size: cover;
}
.downwrap .el-main {
  padding: 0;
}
.downwrap .main {
  text-align: center;
  height: 92vh;
  padding: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.downwrap .main img {
  width: 100%;
}
.downwrap .title {
  color: #333;
  font-weight: 400;
  font-family: " NotoSansHans-Regular", " AvenirNext-Regular", "proxima-nova",
    "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Open Sans",
    "Helvetica Neue", Arial, sans-serif;
  font-size: 24px;
  line-height: 33px;
}
.downwrap  .down-btn {
  margin: auto;
  font-size: 18px;
  padding: 8px 60px;
  background-color: #28caad;
  border-radius: 30px;
  background: #1abc9c;
  border: 1px solid #1abc9c;
  color: #fff;
  font-weight: 400;
}
</style>
 